<template>
	<view>
		<!-- 拼团商品 -->
		<view class="" v-if="list.length > 0">
			<view class="pt-shop" v-for="(item,index) in list" :key="index">
				<view class="pt-shop-item" v-for="(items,indexs) in item.pintuan_list" :key="indexs"
					@click="goJoin(item.id)">
					<view class="pt-goods">
						<view class="pt-goods-item">
							<image class="image"
								:src="item.isab == 1 ? (items.abbuy_type == 'A' ? (item.goodsList.attr[0].pic_url != '' ? item.goodsList.attr[0].pic_url : item.cover_pic) : (item.goodsList.attr[1].pic_url != '' ? item.goodsList.attr[1].pic_url : item.cover_pic)) : item.cover_pic">
							</image>
							<view class="group ed">已拼团</view>
							<view class="name u-line-1">
								{{item.isab == 1 ? (items.abbuy_type == 'A' ? item.goodsList.attr[0].attr_list[0].attr_name : item.goodsList.attr[1].attr_list[0].attr_name) : item.name}}
							</view>
						</view>
						<view class="pt-goods-item">
							<image class="image"
								:src="item.isab == 1 ? (items.abbuy_type == 'A' ? (item.goodsList.attr[1].pic_url != '' ? item.goodsList.attr[1].pic_url : item.cover_pic) : (item.goodsList.attr[0].pic_url != '' ? item.goodsList.attr[0].pic_url : item.cover_pic)) : item.cover_pic">
							</image>
							<view class="group ing">待拼团</view>
							<view class="surplus">
								<app-surplus-time :surplus_date_time="items.surplus_date_time"></app-surplus-time>
							</view>
							<view class="name u-line-1">
								{{item.isab == 1 ? (items.abbuy_type == 'A' ? item.goodsList.attr[1].attr_list[0].attr_name : item.goodsList.attr[0].attr_list[0].attr_name) : item.name}}
							</view>
						</view>
					</view>
					<view class="pt-goods-desc line2">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>

		<view class="nopt" v-else>
			等待有惊喜哦~
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import appSearchFor from '../../../components/page-component/app-search-for/app-search-for.vue';
	import appSurplusTime from '../../../components/page-component/app-pt-attr/app-surplus_time.vue';

	export default {
		data() {
			return {
				navslist: [],
				list: [],
				page: 1,
				limit: 20,
				page_count: 1,
				total_count: 0,
			}
		},
		onLoad() {
			/* this.waitspe(0)
			this.waitspe(1)
			this.waitspe(3) */
			this.waitspe()
			// this.requestCats()
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/pages/pt/apelled/apelled',
				params: {

				}
			});
		},
		onShareTimeline() {
			// 分享朋友圈beta
			return this.$shareTimeline({
				path: '/pages/pt/apelled/apelled',
				params: {

				}
			});
		},
		computed: {
			...mapState({
				themeObject: function(state) {
					let theme = state.mallConfig.mall.setting.theme_color;
					return {
						back: theme + '-m-back ' + theme,
						theme: theme,
						color: theme + '-m-text ' + theme,
						sBack: theme + '-s-back ' + theme
					}
				}
			})
		},
		components: {
			appSearchFor,
			appSurplusTime
		},
		methods: {
			goJoin(id) {
				uni.navigateTo({
					url: `/plugins/pt/goods/goods?goods_id=${id}`
				})
			},
			requestCats() {
				this.$request({
					url: this.$api.pt.cats
				}).then(res => {
					// console.log(res);
					if (res.code === 0) {
						this.navslist = this.navslist.concat(res.data.list);
						this.waitspe();
					}
				});
			},
			waitspe(id) {
				this.$request({
					url: this.$api.pt.allapell,
					data: {
						page: this.page,
						limit: this.limit
					}
				}).then(res => {
					this.list = this.list.concat(res.data.list)
					let a = []
					a = res.data.list

					this.page_count = res.data.pagination.page_count
					this.total_count = res.data.pagination.total_count
				})
			}
		},
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++
				this.waitspe(2)
			} else {
				this.page = 1
				this.waitspe(2)
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 拼团 */
	.pt-shop {
		width: 686rpx;
		// height: 476rpx;
		margin: 0 auto;
	}

	.nopt {
		text-align: center;
		line-height: 476rpx;
		font-size: 36rpx;
	}

	.index-nav {
		width: #{750rpx};
		height: #{92rpx};
	}

	.app-index-nav {
		height: #{92rpx};
		background-color: white;
		width: #{750rpx};
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;

		/* .app-search {
			width: #{108rpx};
			height: #{92rpx};
	
			.app-icon {
				width: #{60rpx};
				height: #{60rpx};
				background-image: url("../image/big-sarch.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		} */

		.app-line {
			width: #{1rpx};
			height: #{40rpx};
			background-color: #e2e2e2;
		}

		.app-scroll {
			width: #{641rpx};
			height: #{92rpx};
			white-space: nowrap;

			.app-item {
				display: inline-block;
				font-size: #{28rpx};
				color: #666666;
				padding: 0 #{24rpx};
				box-sizing: border-box;
				height: #{56rpx};
				line-height: #{56rpx};
				border-radius: #{28rpx};
				margin: #{18rpx} #{32rpx};
			}

			.app-active-item {
				color: white;
			}

			.default-item {
				background: linear-gradient(140deg, #ffa360, #ff5c5c);
			}
		}
	}

	.pt-shop-item {
		width: 686rpx;
		padding: 32rpx;
		margin: 32rpx 0;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.pt-shop-item .item {
		width: 100%;
		height: 100%;
	}

	.pt-goods {
		display: flex;
		justify-content: space-between;
	}

	.pt-goods-item {
		width: 296rpx;
		height: 296rpx;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.pt-goods-item .image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.pt-goods-item .group {
		width: 140rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		border-radius: 26rpx 0px 0px 26rpx;
		position: absolute;
		top: 24rpx;
		right: 0;
	}

	.pt-goods-item .group.ed {
		background: #342B2A;
	}

	.pt-goods-item .group.ing {
		background: #EB5757;
	}

	.pt-goods-item .surplus {
		// width: 216rpx;
		padding: 0 32rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 26rpx 0 0 26rpx;
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		position: absolute;
		top: 88rpx;
		right: 0;
	}

	.pt-goods-item .name {
		width: 100%;
		height: 62rpx;
		line-height: 62rpx;
		text-align: center;
		font-size: 24rpx;
		background: rgba(0, 0, 0, 0.4);
		color: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.pt-goods-desc {
		padding: 26rpx 0 0;
		color: #333333;
		font-size: 24rpx;
	}
</style>
